<template>
  <div class="app-container">
    <div class="header flex">
      <FormSearch :formFields="searchList" @search="Search" @reset="Search" :otherBt="true" otherMsg="绑定用户"
                  @other="handleBindUser"></FormSearch>
    </div>
    <div class="footer">
      <div class="table-inner">
        <a-table :columns="columns" :data-source="state.data" rowKey="user_id" :pagination="state.pagination"
                 @change="pageChange" :loading="state.loading" :scroll="{ x: 1200 }">
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'assets'">
              <div class="flex justify-around">
                <div>
                  <div>余额：{{ record.assets.balance }}</div>
                  <div>积分：{{ record.assets.bonus }}</div>
                </div>
                <div>
                  <div>红包：{{ record.assets.red }}</div>
                  <div>能量：{{ record.assets.energy }}</div>
                </div>
              </div>
            </template>
            <template v-if="column.dataIndex === 'status'">
              <a-switch v-model:checked="record.status" checked-children="启用" un-checked-children="禁用"
                        :checkedValue="1"
                        :unCheckedValue="2" disabled/>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
  <dialog-service ref="createRef" @model-success="refresh"></dialog-service>
</template>
<script setup>
import {meUser} from "@/api/admin/storeUser";
import {reactive, ref} from "vue";
import DialogService from "@/views/contact/dialogService.vue";

const searchList = reactive([
  {
    type: "radio",
    label: "类型",
    name: "take_type",
    value: 2,
    options: [
      {
        label: '已绑定用户',
        value: 2,
      },
      {
        label: '预绑定用户',
        value: 1,
      }

    ],
  },
  {
    type: "input",
    label: "手机号",
    name: "mobile",
    value: "",
    placeholder: "请输入手机号",
  },
  {
    type: "input",
    label: "昵称",
    name: "nickname",
    value: "",
    placeholder: "请输入昵称",
  },
  {
    type: "select",
    label: "新人活动状态",
    name: "new_state",
    value: 0,
    placeholder: "请选择状态",
    allowClear: true,
    options: [
      {
        id: 0,
        name: "全部",
      },
      {
        id: 1,
        name: "新人1进行中",
      },
      {
        id: 2,
        name: "新人2进行中",
      },
      {
        id: 3,
        name: "新人3进行中",
      },
      {
        id: 4,
        name: "新人1已完成",
      },
      {
        id: 5,
        name: "新人2已完成",
      },
      {
        id: 6,
        name: "新人3已完成",
      },
    ],
  }

]);
const createRef = ref();
const state = reactive({
  data: [],
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
    take_type:2
  }, //搜索数据
});
const columns = [
  {
    title: "id",
    dataIndex: "user_id",
    width: 100,
  },
  {
    title: "用户名",
    dataIndex: "nickname",
    width: 200,
  },
  {
    title: "手机号",
    dataIndex: "mobile",
    width: 200,
  },
  {
    title: "资产",
    dataIndex: "assets",
    width: 240,
  },
  {
    title: "邀请码",
    dataIndex: "info",
    width: 200,
    customRender(record) {
      return record.value.invite_code || "-";
    },
  },
  {
    title: "状态",
    dataIndex: "status",
    width: 200,
  },
  {
    title: "注册时间",
    dataIndex: "create_time",
    width: 200,
  },
];

const getList = () => {
  state.loading = true;
  meUser({
    ...state.searchParams,
  }).then((res) => {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code === 0) {
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  //搜索
  getList();
};
const Search = (values) => {
  console.log(values)
  state.searchParams.page = 1;
  state.searchParams = {
    ...state.searchParams,
    ...values,
  };
  //搜索
  getList();
};
const handleBindUser = () => {
  createRef.value.show();
}
const refresh = () => {
  console.log('刷新界面')
  getList()
};
getList();
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  padding: 16px 16px 16px 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}

.footer {
  flex: 1;
  display: flex;
  padding: 16px;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
  position: relative;
  box-sizing: border-box;

  .table-inner {
    flex: 1;
    position: relative;
  }

}
</style>